<template>
  <div class="app-container">

    <u-page title="扣款单查询">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="表单编号" prop="formcode">
            <el-input v-model="listQuery.formcode" placeholder="请输入表单编号" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item label="扣款单号" prop="deductioncode">
            <el-input v-model="listQuery.deductioncode" placeholder="请输入扣款单号" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item label="扣款项目" prop="deductname">
            <el-input v-model="listQuery.deductname" placeholder="请输入扣款项目" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item label="厂商编号" prop="firmcode">
            <el-input v-model="listQuery.firmcode" placeholder="请输入厂编" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item label="合同号" prop="hth">
            <el-input v-model="listQuery.hth" placeholder="请输入厂编" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item label="归档时间" prop="inputDateRange">
            <u-date-time-picker v-model="inputDateRange" />
          </el-form-item>
          <el-form-item label="缴费时间" prop="inputDateRange2">
            <u-date-time-picker v-model="inputDateRange2" />
          </el-form-item>
          <el-form-item label="归属年月" prop="status">
            <el-input v-model="listQuery.yearmonth" placeholder="请输入归属年月" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item label="扣款方式" prop="status">
            <el-select v-model="listQuery.paytype" placeholder="请选择扣款方式" class="status" clearable>
              <el-option v-for="item in kkfsList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >

        <template v-slot:right>
          <el-table-column label="表单编号" prop="code" align="center" fixed="left" width="100" />
          <el-table-column label="表单类型" prop="typename" align="center" fixed="left" width="100" />
        </template>
      </u-table>

    </u-page>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.ContractFormdata,
      kkfsList: [{ value: '账扣', label: '账扣' }, { value: '现金缴款', label: '现扣' }],
      // 表格
      columns: [
        {
          prop: 'deductioncode',
          label: '扣款单号',
          width: '100'
        },
        {
          prop: 'yearmonth',
          label: '归属年月',
          width: '120'
        },
        {
          prop: 'deptname',
          label: '课室',
          width: '120'
        },
        {
          prop: 'hth',
          label: '合同号',
          width: '100'
        },
        {
          prop: 'firmcode',
          label: '厂商号',
          width: '100'
        },
        {
          prop: 'firmname',
          label: '厂商名称',
          width: '200'
        },
        {
          prop: 'kkname',
          label: '扣款项目',
          width: '150'
        },
        {
          prop: 'deductcode',
          label: '扣款代码',
          width: '100'
        },
        {
          prop: 'contracttype',
          label: '承担方式',
          width: '120'
        },
        {
          prop: 'paytype',
          label: '扣款方式',
          render: (h, params) => {
            if (params.row.paytype === '账扣') {
              return h('el-tag', '账扣')
            } else if (params.row.paytype === '现金缴款') {
              return h('el-tag', { props: { type: 'success' }}, '现扣')
            } else if (params.row.paytype === '现扣') {
              return h('el-tag', { props: { type: 'success' }}, '现扣')
            }
          }
        },
        {
          prop: 'summoney',
          label: '缴费总金额',
          width: '130'
        },
        {
          prop: 'zgid',
          label: '专柜号',
          width: '130'
        },
        {
          prop: 'zgname',
          label: '专柜名称',
          width: '150'
        },
        {
          prop: 'starttime',
          label: '开始时间',
          width: '200'
        },
        {
          prop: 'endtime',
          label: '归档时间',
          width: '200'
        },
        {
          prop: 'signdate',
          label: '缴费时间',
          width: '200'
        }
      ],
      list: [],
      inputDateRange: [],
      inputDateRange2: [],
      listLoading: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        formcode: '',
        deductioncode: '',
        deductname: '',
        yearmonth: '',
        paytype: '',
        firmcode: '',
        hth: ''
      }
    }
  },
  methods: {
    // 搜索事件
    handleFilter() {
      this.inputdateFormat()
      this.hdlFilter()
    },
    // 注册时间格式转换
    inputdateFormat() {
      if (this.inputDateRange) {
        this.listQuery.beginTime = this.inputDateRange[0]
        this.listQuery.endTime = this.inputDateRange[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
      if (this.inputDateRange2) {
        this.listQuery.beginTimeByKK = this.inputDateRange2[0]
        this.listQuery.endTimeByKK = this.inputDateRange2[1]
      } else {
        this.listQuery.beginTimeByKK = ''
        this.listQuery.endTimeByKK = ''
      }
    },
    // 导出excel
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      console.log(list)
      // 表头&表数据
      const tHeader = ['表单编号', '表单类型', '扣款单号', '归属年月', '课室', '合同号', '厂商号', '厂商名称', '扣款项目', '扣款代码', '扣款方式', '缴费总金额', '承担方式', '专柜号', '专柜名称',
        '开始时间', '归档时间', '缴费时间']
      const filterVal = ['code', 'typename', 'deductioncode', 'yearmonth', 'deptname', 'hth', 'firmcode', 'firmname', 'kkname','deductcode', 'paytype', 'summoney', 'contracttype', 'zgid', 'zgname',
        'starttime', 'endtime', 'signdate']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('商友临时扣款表', tHeader, data)
    },
    /**
     * 查询事件
     */
    hdlFilter() {
      this.listQuery.page = 1
      this.hdlList()
    },
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      self.api.kklist(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
  .item >>> .el-form-item__content {
    display: flex;
  }
  .status {
    ::v-deep{
      .el-input{
        width: 140px;
      }
    }
  }
  ::v-deep{
    .el-table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
        font-size: 12px;
      }

      .el-form-item{
        margin-bottom: 2px;
        margin-right: 0;
        vertical-align: top;
      }

      .el-form-item__content {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 12px;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
    }
  }
}
</style>
